<template>
  <div class="container">
    <div class="content">
      <div class="topMsg">
        父级菜单 > <span style="color: #4285f4"> {{ form.title }}</span>
      </div>
      <div class="formBox">
        <el-form ref="form" :model="form" label-width="140px">
          <div class="formItem">
            <el-form-item label="菜单名称">
              <el-input v-model="form.menuName" />
            </el-form-item>
            <el-form-item label="父级页面">
              <treeselect
                v-model="form.parentId"
                :options="menuOptions"
                :show-count="true"
                placeholder="请选择上级菜单"
                :normalizer="normalizer"
                @select="handleSelect"
                :default-expand-level="defaultLevel"
              />
            </el-form-item>
          </div>

          <div class="formItem">
            <el-form-item label="菜单编码">
              <el-input v-model="form.path" />
            </el-form-item>
            <el-form-item label="节点类型">
              <el-select v-model="form.menuType" placeholder="请选择节点类型">
                <el-option
                  v-for="item in typeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </div>

          <div class="dialogFooter">
            <el-form-item>
              <el-button
                class="rightBtn"
                @click="onSubmitMenu"
                v-permission="'menuManagementEdit'"
                >立即创建</el-button
              >
              <el-button class="leftBtn" @click="cancelMenu">取消</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

import { handleTree } from "@/utils/transListToTreeData";
import {
  getMenuList,
  menuDetail,
  menuAdd,
  menuUpdate,
} from "@/api/systemManagement";

import { dictionaryListApi } from "@/api/login";
export default {
  name: "MenuDetail",
  components: { Treeselect },
  data() {
    return {
      titleName: "查看详情",
      form: {
        parentId: null,
      },
      typeList: [],
      menuId: "",
      isShowList: [],
      enableList: [],
      menuOptions: [],
      defaultLevel: 2,
    };
  },
  created() {
    this.menuId = this.$route.query.menuId;
    this.dictionaryList();
    this.GetMenuList();
    if (this.menuId) {
      this.GetMenuDetails();
    }
  },
  methods: {
    async dictionaryList() {
      const res = await dictionaryListApi({
        type: "menu_type",
      });
      this.typeList = res.data;
    },
    async GetMenuList() {
      const res = await getMenuList();
      this.menuOptions = [];
      const menu = {
        id: 0,
        menuName: "美欣达印染园区安全管理平台",
        menuList: [],
        parentId: -1,
      };
      menu.menuList = handleTree(res.data, "id");
      this.menuOptions.push(menu);
    },

    normalizer(node) {
      if (node.menuList && !node.menuList.length) {
        delete node.menuList;
      }
      return {
        id: node.id,
        label: node.menuName,
        children: node.menuList,
      };
    },
    async GetMenuDetails() {
      const res = await menuDetail({ id: this.menuId });
      this.form = res.data;
    },

    async onSubmitMenu() {
      if (this.menuId) {
        const data = {
          id: this.form.id,
          parentId: this.form.parentId,
          path: this.form.path,
          menuType: this.form.menuType,
          menuName: this.form.menuName,
        };
        const res = await menuUpdate(data);
        if (res.code == 0) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.$router.push({ path: "/menuManagement" });
        }
      } else {
        this.form.parentId = this.form.id;
        const data = {
          parentId: this.form.parentId,
          path: this.form.path,
          menuType: this.form.menuType,
          menuName: this.form.menuName,
        };
        const res = await menuAdd(data);
        if (res.code == 0) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.$router.push({ path: "/menuManagement" });
        }
      }

      this.cancelMenu();
    },
    cancelMenu() {
      this.$router.push({ path: "/menuManagement" });
    },
    handleSelect(node) {
      this.form.id = node.id;
      this.form.parentId = node.parentId;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #f8fafc;
  padding: 10px;
  .content {
    background-color: #fff;
    padding: 20px 10px;
    .topMsg {
      color: #999999;
    }
    .formBox {
      padding: 10px 180px;
      .formItem {
        display: flex;
        justify-content: space-between;
      }
      .el-form-item {
        width: 500px;
        margin-bottom: 10px;
      }
      .el-select {
        width: 100%;
      }
      .el-input-number {
        width: 300px;
      }
      .el-cascader {
        width: 300px;
      }
      .el-input {
        width: 300px;
      }
      .el-select {
        width: 300px;
      }
      .el-input el-input--suffix {
        width: 300px;
      }
      .dialogFooter {
        display: flex;
        justify-content: right;

        margin-top: 10px;
        .leftBtn {
          border: 1px solid #4285f4;
          color: #4285f4;
        }
        .rightBtn {
          background-color: #4285f4;
          color: #fff;
          border: none;
        }
      }
    }
  }
}
</style>
